<!--  -->
<template>
  <div id="Productdetails">
    <div class="hint">
      <hint></hint>
    </div>
    <div class="Productdetails-top"><span>商品参数</span></div>
    <div class="Productdetails-content">
      <el-form
        status-icon
        class="content-form"
        :model="form"
        ref="subform"
        :rules="rules"
      >
        <el-form-item prop="name" label="店铺名称" class="content-form-item">
          <el-select
            v-model="form.name"
            placeholder="请选择店铺"
            class="form-select"
          >
            <el-option
              v-for="item in dp"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="partition"
          label="商品名称"
          class="content-form-item"
        >
          <el-select
            v-model="form.partition"
            placeholder="请选择商品"
            class="form-select"
          >
            <el-option
              v-for="item in partition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="type" label="商品分类" class="content-form-item">
          <el-select
            v-model="form.type"
            placeholder="请选择分类名称"
            class="form-select"
          >
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="num" label="商品数量" class="content-form-item">
          <el-input
            class="input"
            :min="1"
            type="number"
            v-model="form.num"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="canteenPrice"
          label="食堂价"
          class="content-form-item"
        >
          <el-input
            class="input"
            :min="1"
            type="number"
            v-model="form.canteenPrice"
            placeholder="请输入商品数量"
          ></el-input>
        </el-form-item>
        <el-form-item prop="vipPrice" label="会员价" class="content-form-item">
          <el-input
            class="input"
            :min="1"
            type="number"
            v-model="form.vipPrice"
            placeholder="请输入价钱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="costPrice" label="成本价" class="content-form-item"  type="number">
          <el-input
            class="input"
            :min="1"
            v-model="form.costPrice"
            placeholder="请输入价钱"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="sellingPrice"
          label="外卖价"
          class="content-form-item"
        >
          <el-input
            class="input"
            :min="1"
            v-model="form.sellingPrice"
            placeholder="请输入价钱"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="上架状态" prop="delivery">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('subform')"
            >确定</el-button
          >
          <el-button type="primary" @click="outlist">商品列表</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from "./header";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    hint: hint,
  },
  data() {
    //这里存放数据
    return {
      form: {
        name: "", //店铺名
        partition: "", //商品名
        type: "", //商品类型
        num: 1, //商品数量
        canteenPrice: "", //食堂价
        vipPrice: "", //vip价
        costPrice: "", //成本价
        sellingPrice: "", //外卖价
        delivery: true, //上架状态
      },
      dp: [
        {
          value: "肯德基",
          label: "肯德基",
        },
        {
          value: "华莱士",
          label: "华莱士",
        },
        {
          value: "麦当劳",
          label: "麦当劳",
        },
        {
          value: "汉堡王",
          label: "汉堡王",
        },
        {
          value: "必胜客",
          label: "必胜客",
        },
        {
          value: "德克士",
          label: "德克士",
        },
      ],
      partition: [
        {
          value: "麦旋风",
          label: "麦旋风",
        },
        {
          value: "奥尔良鸡翅",
          label: "奥尔良鸡翅",
        },
        {
          value: "鸡块",
          label: "鸡块",
        },
      ],
      type: [
        {
          value: "热菜",
          label: "热菜",
        },
        {
          value: "凉菜",
          label: "凉菜",
        },
      ],
      rules: {
        name: {
          required: true,
          message: "请选择店铺",
        },
        partition: {
          required: true,
          message: "请选择商品",
        },
        type: {
          required: true,
          message: "请选择商品类型",
        },
        num: {
          required: true,
          message: "请输入商品数量",
        },
        canteenPrice: {
          required: true,
          message: "该选项不能为空",
        },
        vipPrice: {
          required: true,
          message: "该选项不能为空",
        },
        costPrice: {
          required: true,
          message: "该选项不能为空",
        },
        sellingPrice: {
          required: true,
          message: "该选项不能为空",
        },
        delivery: {
          required: false,
          message: "请选择状态",
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit: function (form) {
      this.$refs[form].validate((valid, obj) => {
        console.log(valid, obj);
        if (valid === true) {
          alert("添加成功");
          console.log(this.form);
          this.$emit("getnewproduct", this.form);
          this.$router.push("productList");
        }
      });
    },
    outlist: function () {
      this.$router.push("productList");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.Productdetails-top {
  border: 1px solid #e9e9e9;
  height: 30px;
  line-height: 30px;
  text-indent: 50px;
  font-weight: bold;
  margin-bottom: 50px;
}
.Productdetails-content {
  width: 800px;
  margin: 0 auto;
  .content-form {
    .content-form-item {
      width: 400px;
      .form-select {
        width: 400px;
      }
      .input {
        width: 400px;
      }
    }
  }
}
</style>